<template>
  <a-spin :loading="loading" style="width: 100%">
    <a-card class="general-card" :header-style="{ paddingBottom: '14px' }">
      <template #title> 设备总览 </template>
      <template #extra>
        <!-- <a-link>{{ $t('workplace.viewMore') }}</a-link> -->
      </template>
      <!-- 这里替换为饼图 -->
      <div class="chart-box">
        <VueECharts
          :option="pieOption"
          :autoresize="true"
          style="width: 100%; height: 300px"
        />
      </div>
      <!-- 结束饼图 -->
    </a-card>
  </a-spin>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import useLoading from '@/hooks/loading';
  import { queryPopularAuthor, PopularAuthorRes } from '@/api/visualization';

  // 引入并注册 ECharts 所需模块
  import VueECharts from 'vue-echarts';
  import { use } from 'echarts/core';
  import { LegendComponent, TooltipComponent } from 'echarts/components';
  import { PieChart } from 'echarts/charts';
  import { CanvasRenderer } from 'echarts/renderers';
  import type { EChartsOption } from 'echarts';

  use([LegendComponent, TooltipComponent, PieChart, CanvasRenderer]);

  const { loading, setLoading } = useLoading();
  const tableData = ref<PopularAuthorRes>({ list: [] });

  // 饼图配置（可替换为接口数据）
  const pieOption = ref<EChartsOption>({
    tooltip: { trigger: 'item' },
    legend: { bottom: 0 },
    series: [
      {
        name: '设备',
        type: 'pie',
        radius: '60%',
        label: { formatter: '{b}: {c}' },
        data: [
          { value: 6, name: '交换机' },
          { value: 70, name: '电视' },
          { value: 30, name: '打印机' },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  });

  const fetchData = async () => {
    try {
      setLoading(true);
      const { data } = await queryPopularAuthor();
      tableData.value = data;
      // 如果后续需要用接口数据更新饼图：
      // pieOption.value.series[0].data = transform(data)
    } catch (err) {
      // you can report use errorHandler or other
    } finally {
      setLoading(false);
    }
  };
  fetchData();
</script>

<style scoped lang="less">
  .general-card {
    max-height: 425px;
  }

  .chart-box {
    // border: 1px solid #e5e5e5;
  }
</style>
